import React, { useEffect, useState } from 'react';
import { Descriptions, Table, Modal, Divider, Button } from 'antd'
import { showMsg } from '@/utils/utils';

const PayDialog: React.FC<any> = (props) => {
  const { 
    patientInfo = {}, 
    handleModalVisible,
    goodsList = [],
    settleInfo = {}
  } = props;
  
  const columns = [
    {
      title: '分类',
      dataIndex: 'class_name'
    },
    {
      title: '品牌',
      dataIndex: 'brand_name'
    },
    {
      title: '商品名称',
      dataIndex: 'goods_name'
    },
    {
      title: '商品编号',
      dataIndex: 'goods_id'
    },
    {
      title: '规格（单位）',
      dataIndex: 'specs_name'
    },
    {
      title: '单价',
      dataIndex: 'goods_price'
    },
    {
      title: '数量',
      dataIndex: 'goods_price'
    },
    {
      title: '原价',
      dataIndex: 'goods_price'
    },
    {
      title: '折扣',
      dataIndex: 'goods_num'
    },
    {
      title: '折扣价',
      dataIndex: 'goods_price'
    }
  ]

  return <Modal
      title="订单支付"
      width="70%"
      onCancel={() => handleModalVisible(false)}
      footer={[
        <Button key="close" onClick={() => {
          handleModalVisible(false);
        }}>
          关闭
        </Button>,
        <Button key="pay" type="primary" onClick={() => {}}>
          发起支付
        </Button>
      ]}
      visible>
      <div className="dialog">
        <div>1.患者信息</div>
        <Divider />
        <Descriptions>
          <Descriptions.Item label="身份证/住院号">
            {patientInfo.identity_no || patientInfo.admission_num}
          </Descriptions.Item>
          <Descriptions.Item label="患者姓名">
            {patientInfo.patient_name}
          </Descriptions.Item>
          <Descriptions.Item label="归属科室">
            {patientInfo.create_dept_name}
          </Descriptions.Item>
        </Descriptions>
       
        <div style={{marginBottom: 10}}>2.商品信息</div>
        <Divider />

        <Table<STOCKGOODSAPI.GoodsItem> 
          rowKey="goods_id"
          columns={columns}
          pagination={false}
          scroll={{ x: 1000 }}
          dataSource={goodsList}
          bordered />

        <div style={{marginBottom: 10, marginTop: 10}}>3.结算信息</div>
        <Divider />
        <Descriptions>
          <Descriptions.Item label="订单支付金额">
            <span style={{
              fontWeight: 'bold',
              color: '#333'
            }}></span> （元）
          </Descriptions.Item>
          <Descriptions.Item label="退款商品数量">
            <span style={{
              fontWeight: 'bold',
              color: '#F5232D'
            }}></span>（件）
          </Descriptions.Item>
          <Descriptions.Item label="退款金额">
            <span style={{
              fontWeight: 'bold',
              color: '#F5232D'
            }}></span> （元）
          </Descriptions.Item>
        </Descriptions>
      </div>
    </Modal>
}
export default PayDialog;
